{% extends 'website/base.html' %}

{% block title %} {% endblock %}

{% block external_header %}
    {# 可在子模板中添加额外 CSS #}
{% endblock %}

{% block body %}
    <!-- 头部 -->
    {% include 'website/frontend/header.html' %}

    <!-- 主内容区 -->
    <main class="main-page flex-grow-1">
        <div class="container">
            <div class="row g-4">
                <!-- 左侧主内容 -->
                <div class="col-12 col-lg-9">
                    {% block left %}{% endblock %}
                </div>

                <!-- 右侧侧边栏 -->
                <div class="col-12 col-lg-3">
                    {% include "website/frontend/sidebar.html" %}
                </div>
            </div>
        </div>
    </main>

    <!-- 底部 -->
    {% include 'website/frontend/footer.html' %}
{% endblock %}

{% block external_js %}
    {# 所有 JS 使用原生 JavaScript，无需 jQuery #}
    <script>
        // 等待 DOM 加载完成
        document.addEventListener("DOMContentLoaded", function () {
            const body = document.body;
            const mainPage = document.querySelector('.main-page');

            if (!mainPage) return;

            // 更健壮的高度控制逻辑（可选）
            function adjustMainHeight() {
                const minHeight = 650;
                const targetHeight = 430;

                if (body.scrollHeight < minHeight) {
                    mainPage.style.minHeight = `${targetHeight}px`;
                } else {
                    mainPage.style.minHeight = '';
                }
            }

            // 初始化
            adjustMainHeight();

            // 窗口大小改变时重新计算（可选）
            window.addEventListener('resize', adjustMainHeight);
        });

        // 你可以在此扩展更多 JS 功能
    </script>

    {% block front_js %}
        {# 子模板可在此添加页面专属 JS #}
    {% endblock %}
{% endblock %}